<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top: 5%; height: 90%; overflow-y: hidden"
  >
    <a-spin :spinning="confirmLoading">
      <div class="report">
        <ul class="years">
          <li :class="['years_item', 0 === munIndex ? 'active' : '']"  @click="showToggle('', 0)">
            <div class="title">
              <div class="titleLeft">
                <img class="arrow_img" src="@assets/account.jpg" />
                <span>全部</span>
              </div>
            </div>
          </li>
          <li
            :class="['years_item', index === munIndex - 1 ? 'active' : '']"
            v-for="(item, index) in menuList"
            :key="index"
            @click="showToggle(item, item.value)"
          >
            <div class="title">
              <div class="titleLeft">
                <img class="arrow_img" src="@assets/chat/point.png" />
                <span>{{ item.text }}</span>
              </div>
              <!-- <i :class="['iconfont', item.list.length > 1 ? 'icon-xiangxia' : 'icon-xiangshang']"></i> -->
            </div>
            <!-- <ul v-show="item.isSubShow" class="content">
              <li v-for="(subItem, index) in item.subItems" :key="index">
                <div>{{ subItem.name }}</div>
              </li>
            </ul> -->
          </li>
        </ul>
      </div>
      <div class="reportList">
        <input class="chat-input" v-model="newMessage" @keyup.enter="sendMessage" placeholder="请输入内容..." />
        <div class="list-wrap" @scroll="orderScroll($event)">
          <div class="list" ref="dialogCount" v-for="(item, index) in listData" :key="index + 1">
            <div class="title">{{ item.title }}</div>
            <div class="content">
              <a-tooltip :title="item.content">
                {{ item.content }}
              </a-tooltip>
            </div>
            <div class="bottom">
              <div class="botLeft">精选</div>
              <div class="botRight" @click="useList(item)">使用</div>
            </div>
          </div>
          <div class="sheCot copy" style="cursor: pointer;" v-if="bomCrl && !empty" @click="clickLoadMore">点击加载更多</div>
          <div class="sheCot copy" v-if="!bomCrl && empty">
                正在加载中
            <div class="loading"></div>
          </div>
          <div v-if="empty" class="tr-nodata">
            <span>没有更多了</span>
          </div>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { addRole, editRole, duplicateCheck } from '@/api/api'
import { getAction } from '@/api/manage'
export default {
  name: 'RoleModal',
  data() {
    return {
      pageNo:1,
      pageSize:10,
      bomCrl:true,
      empty:false,
      munIndex: 0,
      newMessage: '',
      title: '操作',
      visible: false,
      roleDisabled: false,
      model: {},
      confirmLoading: false,
      arrow_r: '111111111111',
      listData: [
        {
          title: '医生',
          content:
            '111111医生是提供医疗服务（如诊断、治疗和预防疾病等）的专业人员。医学院校通常包括医学课程和临床实践，以帮助医生获得必要的专业知识、技能和工具，以确保他们能够为患者提供最佳的医疗服务。',
        },
        {
          title: '医生',
          content: '222222。',
        },
        {
          title: '医生',
          content:
            '333333医生是提供医疗服务（如诊断、治疗和预防疾病等）的专业人员。医学院校通常包括医学课程和临床实践，以帮助医生获得必要的专业知识、技能和工具，以确保他们能够为患者提供最佳的医疗服务。',
        },
        {
          title: '医生',
          content:
            '4444444医生是提供医疗服务（如诊断、治疗和预防疾病等）的专业人员。医学院校通常包括医学课程和临床实践，以帮助医生获得必要的专业知识、技能和工具，以确保他们能够为患者提供最佳的医疗服务。',
        },
        {
          title: '医生',
          content:
            '5555555医生是提供医疗服务（如诊断、治疗和预防疾病等）的专业人员。医学院校通常包括医学课程和临床实践，以帮助医生获得必要的专业知识、技能和工具，以确保他们能够为患者提供最佳的医疗服务。',
        },
        {
          title: '医生',
          content:
            '6666666医生是提供医疗服务（如诊断、治疗和预防疾病等）的专业人员。医学院校通常包括医学课程和临床实践，以帮助医生获得必要的专业知识、技能和工具，以确保他们能够为患者提供最佳的医疗服务。',
        },
      ],
      menuList: [
        {
          name: '意见',
          imgUrl: 'https://cdn-static-devbit.csdn.net/ai100/chat/imgs/icon-model-cover.png',
          isSubShow: false,
          subItems: [
            {
              name: '字符录入------内容1',
            },
            {
              name: '白话文录入------内容1',
            },
            {
              name: '文言文录入------内容1',
            },
            {
              name: '小写数字录入------内容1',
            },
          ],
        },
        {
          name: '关系',
          imgUrl: 'https://cdn-static-devbit.csdn.net/ai100/chat/imgs/icon-model-cover.png',
          isSubShow: false,
          subItems: [
            {
              name: '票据录入------内容2',
            },
            {
              name: '翻打传票------内容2',
            },
          ],
        },
        {
          name: '创作',
          imgUrl: 'https://cdn-static-devbit.csdn.net/ai100/chat/imgs/icon-model-cover.png',
          isSubShow: false,
          subItems: [
            {
              name: '交易码录入------内容3',
            },
            {
              name: '交易名称录入------内容3',
            },
          ],
        },
        {
          name: '休闲',
          imgUrl: 'https://cdn-static-devbit.csdn.net/ai100/chat/imgs/icon-model-cover.png',
          isSubShow: false,
          subItems: [
            {
              name: '操作码录入------内容4',
            },
            {
              name: '操作名称录入------内容4',
            },
          ],
        },
        {
          name: '编程',
          imgUrl: 'https://cdn-static-devbit.csdn.net/ai100/chat/imgs/icon-model-cover.png',
          isSubShow: false,
          subItems: [],
        },
      ],
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  mounted() {
    //提示词

    this.apiTeleprompterList('','')
      this.loadDictOptions()
  },
  methods: {
    // 根据字典code查询字典项
    loadDictOptions(){
        getAction(`/sys/dict/getDictItems/TCQ`,{}).then(res=>{
          console.log('ressssss',res)
          this.$nextTick(function(){
            this.menuList = res.result
          })

          if (res.success) {
            
          } else {
          }
        })
      },
    getType(type) {
      if (type === 1) {
        return '意见'
      } else if (type === 2) {
        return '关系'
      } else if (type === 3) {
        return '创作'
      } else if (type === 4) {
        return '休闲'
      } else if (type === 5) {
        return '编程'
      }else if (type === 6) {
        return '学习'
      }else if (type === 7) {
        return '办公'
      }else if (type === 8) {
        return '职场'
      }else if (type === 9) {
        return '生活娱乐'
      }else if (type === 10) {
        return '儿童教育'
      }
    },
    apiTeleprompterList(cont,tpe) {
      getAction('/teleprompter/list', { content: cont, type: tpe,pageNo:this.pageNo })
        .then((res) => {
          console.log('resresult', res.result)
          var records = res.result.records
          if (res.success) {
            if(tpe === '' && cont === ''){
              // this.menuList = this.getListGroupBy(res.result.records, 'type')
            }
                // if(records !== 10){
                //   this.empty = true
                //   this.bomCrl = true
                // }

            if(records === [] || records.length === 0){
              console.log('11111111111111111111111111')
              if(this.pageNo === 1){
                this.listData = records
              }
              this.empty = true
              this.bomCrl = true
            }else{
              if(!this.bomCrl){
                console.log('2222222222222222222222')

                this.bomCrl = true
                this.empty = false
                this.listData = this.listData.concat(records)
                
              }else{
                console.log('3333333333333333333333333333333')
                this.listData = records
              }
            }

            this.$emit('chatListMode',this.listData)
            console.log(
              "this.getListGroupBy(res.result.records,'type')",
              this.getListGroupBy(res.result.records, 'type')
            )
          }
        })
        .finally(() => {})
    },
    //提示词重新整合数据（以类型为主）
    getListGroupBy(list, key) {
      var keysArr = list.map((item) => item[key])
      var keys = [...new Set(keysArr)]
      var newList = keys.map((item) => {
        return {
          [key]: item,
          list: list.filter((i) => i[key] == item),
        }
      })
      return newList
    },
    //监听滚动条距离
    orderScroll(e) {
      // let scrollHeight = e.target.scrollHeight
      // let clientHeight = e.target.clientHeight
      // let scrollTop = e.target.scrollTop
      // // console.log('scrollHeight',e,scrollHeight,clientHeight,scrollTop)
      // if (scrollTop + clientHeight >= scrollHeight) {
      //   console.log('到底了!')
      //   this.clickLoadMore()
      // } else {
      //   // this.bomCrl = true
      // }
    },
    clickLoadMore(){
      this.bomCrl = false
        this.pageNo ++
        this.sendMessage()
    },
    //使用聊天弹框语言
    useList(data) {
      this.visible = false
      this.$emit('ok', data)
    },
    //查询
    sendMessage() {
      if (this.newMessage.trim() !== '') {
        this.apiTeleprompterList(this.newMessage,this.munIndex > 0 ? this.munIndex : '')
      }else{
        this.apiTeleprompterList('',this.munIndex > 0 ? this.munIndex : '')
      }
    },
    // 点击展开折叠菜单事件
    showToggle(item, ind) {
      // console.log('ind',ind,item)
      this.pageNo = 1
      this.munIndex = ind
      this.apiTeleprompterList(this.newMessage,item.value === 0 ? '' : item.value)
      // this.menuList.forEach((i) => {
      //   // 判断如果数据中的menuList[i]的show属性不等于当前数据的isSubShow属性那么menuList[i]等于false
      //   if (i.isSubShow !== this.menuList[ind].isSubShow) {
      //     i.isSubShow = false
      //   }
      // })
      // item.isSubShow = !item.isSubShow
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      //编辑页面禁止修改角色编码
      if (this.model.id) {
        this.roleDisabled = true
      } else {
        this.roleDisabled = false
      }
    },
    close() {
      // this.$refs.form.clearValidate()
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let obj
          if (!this.model.id) {
            obj = addRole(this.model)
          } else {
            obj = editRole(this.model)
          }
          obj
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style lang="less" scoped>
@px: 4;
.report {
  height: 100%;
  width: 25%;
  float: left;
  .years {
    margin: 20px;
    height: 580px;
    overflow: hidden auto;
    .years_item {
      line-height: 40px;
      // padding: 0 24px * @px;
      margin: 12px 0;
      border: 1px * @px solid #fff;
      background: #ffffff;
      border-radius: 10px * @px;
      cursor: pointer;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .arrow_img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        .titleLeft {
          display: flex;
          align-items: center;
          img {
            margin-right: 5px;
          }
        }
      }
      &.active {
        background: #f2edff;
        padding: 6px 10px;
        transition: all 0.5s;
        .titleLeft {
          color: #7a46fc;
        }
      }
    }
  }
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.reportList {
  float: left;
  width: 75%;
  padding: 20px;
  background: #f0f2f5;
  height: 100%;
  .list-wrap {
    height: 500px;
    overflow: hidden auto;
  }
  .list {
    width: 100%;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    .title {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 5px;
    }
    .content {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: off*/
      -webkit-box-orient: vertical; 
      /* autoprefixer: on*/
      color: #999;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    .botRight {
      color: #7a46fc;
      background: transparent;
      border: 1px solid #7a46fc;
      text-shadow: none;
      width: 82px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .botRight:hover {
      background: #7a46fc;
      color: white;
    }
  }
  .list:nth-last-child(1) {
    margin-bottom: 0px;
  }
  .chat-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    border-radius: 8px;
    height: 40px;
    line-height: 20px;
    padding: 3px 20px;
    box-shadow: 0 5px 25px #193e7b14;
    margin-right: 10px;
    width: 100%;
    border: 1px solid #d9d9d9;
    margin-bottom: 20px;
  }
  .tr-nodata {
    text-align: center;
    color: #b4b4b4;
  }
}
.sheCot.copy{
  width: 100px;
  text-align: center;
    margin: auto;
}
.loading {
  width: 22px;
  height: 22px;
  border: 2px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rotate 0.75s linear infinite;
  float: right;
  margin-left: 4px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 767px) {
  .report {
    .years{
      margin: 0;
    }
  }
  /deep/.ant-modal-cust-warp {
    .ant-modal-body{
      padding: 5px;
    }
  }
  .reportList{
    padding: 5px;
  }
  .activatePop{
    .activateBox{
      
    }
  } 

}

</style>